<template>
  <div>
    <el-form inline class="searchForm">
      <el-form-item>
        <el-input v-model="params.operName" placeholder="请输入操作人员名"  clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="params.businessType" placeholder="业务类型" style="width: 120px;" clearable>
          <el-option label="其它" :value="0"></el-option>
          <el-option label="新增" :value="1"></el-option>
          <el-option label="修改" :value="2"></el-option>
          <el-option label="删除" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="params.status" placeholder="状态" style="width: 120px;" clearable>
          <el-option label="正常" :value="0"></el-option>
          <el-option label="异常" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起始时间:">
        <el-input type="date" v-model="params.startTime" clearable></el-input>
      </el-form-item>
      <el-form-item label="结束时间:">
        <el-input type="date" v-model="params.endTime"  clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getOperLogPageList">
          <el-icon>
            <svg t="1646977561352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3057" width="200" height="200"><path d="M986.304 871.424L747.328 630.4c-2.816-2.752-5.888-4.928-8.768-7.232 40.32-62.464 63.936-136.832 63.936-216.96 0-220.16-176.96-398.592-395.392-398.592C188.8 7.616 11.712 186.048 11.712 406.208s177.088 398.592 395.392 398.592a391.232 391.232 0 0 0 215.36-64.576c2.24 3.072 4.352 6.08 7.04 8.832l239.04 241.024a82.688 82.688 0 0 0 117.76 0 84.48 84.48 0 0 0 0-118.656m-579.2-192.512c-149.12 0-270.528-122.368-270.528-272.704 0-150.4 121.344-272.768 270.528-272.768 149.12 0 270.528 122.432 270.528 272.768 0 150.4-121.408 272.704-270.528 272.704" p-id="3058"></path></svg>
          </el-icon>
          &nbsp;查&nbsp;&nbsp;询
        </el-button>
      </el-form-item>
    </el-form>
  </div>

  <!-- 表格 -->
  <el-table :data="operLogPageList" style="width: 100%; margin-top: 10px;" table-layout="auto" size="large" border stripe>
    <el-table-column type="expand" label="明细" width="65">
      <template #default="{ row }">
        <el-form label-position="left" style="padding-left: 30px">
          <el-form-item label="模块标题：">
            <span>{{ row.title }}</span>
          </el-form-item>
          <el-form-item label="业务类型：">
            <span>{{ row.businessType }}</span>
          </el-form-item>
          <el-form-item label="方法名称：">
            <span>{{ row.method }}</span>
          </el-form-item>
          <el-form-item label="请求方式：">
            <span>{{ row.requestMethod }}</span>
          </el-form-item>
          <el-form-item label="操作类别：">
            <span>{{ row.operatorType }}</span>
          </el-form-item>
          <el-form-item label="操作人员：">
            <span>{{ row.operName }}</span>
          </el-form-item>
          <el-form-item label="请求URL：">
            <span>{{ row.operUrl }}</span>
          </el-form-item>
          <el-form-item label="主机地址：">
            <span>{{ row.operIp }}</span>
          </el-form-item>
          <el-form-item label="操作地点：">
            <span>{{ row.operLocation }}</span>
          </el-form-item>
          <el-form-item label="请求参数：">
            <span>{{ row.operParam }}</span>
          </el-form-item>
          <el-form-item label="返回结果：">
            <span>{{ row.jsonResult }}</span>
          </el-form-item>
          <el-form-item label="操作状态：">
            <span>{{ row.status }}</span>
          </el-form-item>
          <el-form-item label="错误消息：">
            <span>{{ row.errorMsg }}</span>
          </el-form-item>
          <el-form-item label="操作时间：">
            <span>{{ row.operTime }}</span>
          </el-form-item>
          <el-form-item label="消耗时间：">
            <span>{{ row.costTime }}ms</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column type="index" label="序号" width="65" />
    <el-table-column prop="title" label="模块标题" />
    <el-table-column prop="businessType" label="业务类型" />
    <el-table-column prop="method" label="方法名称" />
    <el-table-column prop="requestMethod" label="请求方式" />
    <el-table-column prop="operName" label="操作人员" />
    <el-table-column prop="operUrl" label="请求URL" />
    <el-table-column prop="status" label="操作状态" />
    <el-table-column prop="operTime" label="操作时间" sortable />
    <el-table-column prop="costTime" label="用时(ms)" />
  </el-table>
  <!-- 分页 -->
  <el-pagination
      background
      :total="params.totalNum"
      :page-sizes="[5, 10, 15, 20, 25, 30]"
      v-model:page-size="params.pageSize"
      v-model:currentPage="params.pageNum"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px;"
      @size-change="changeSize"
      @current-change="changeCurrent"
  />
</template>

<script setup>
import { reactive, ref } from 'vue';
import { get, put, del, tip, export2excel, WAREHOUSE_CONTEXT_PATH } from "@/common";
import { useRouter } from "vue-router";

const router = useRouter(); // 获取路由器

// 分页模糊查询数据
const params = reactive({
  operName: '',
  businessType: null,
  status: null,
  startTime: null,
  endTime: null,
  pageSize: 10,
  pageNum: 1,
  totalNum: 0
})

// 表格数据
const operLogPageList = ref();

// 获取分页模糊查询结果
const getOperLogPageList = () => {
  get("/oper-log", params).then(result => {
    operLogPageList.value = result.data.resultList;
    params.totalNum = result.data.totalNum;

    // 结果映射
    operLogPageList.value.forEach((item) => {
      // 业务类型（0其它 1新增 2修改 3删除）
      switch (item.businessType) {
        case 0:
          item.businessType = '其它'
          break
        case 1:
          item.businessType = '新增'
          break
        case 2:
          item.businessType = '修改'
          break
        case 3:
          item.businessType = '删除'
          break
      }
      // 操作类别（0其它 1后台用户 2手机端用户）
      switch (item.operatorType) {
        case 0:
          item.operatorType = '其它'
          break
        case 1:
          item.operatorType = '后台用户'
          break
        case 2:
          item.operatorType = '手机端用户'
          break
      }
      // 操作状态（0正常 1异常）
      switch (item.status) {
        case 0:
          item.status = '正常'
          break
        case 1:
          item.status = '异常'
          break
      }
    })
  })
}
getOperLogPageList();

// 修改每页显示条数
const changeSize = (size) => {
  params.pageSize = size;
  // 重新查询
  getOperLogPageList();
}
// 修改当前页码
const changeCurrent = (num) => {
  params.pageNum = num;
  // 重新查询
  getOperLogPageList();
}
</script>

<style scoped>
.searchForm{
  margin-top: 20px;
  display: flex;
}
</style>
